<template>
    <div class="shopIofoMain">
        <div class="homeMain-title">
            我的店铺
        </div>
            <Tabs type="card" v-model="tabName" @on-click="getTabName">
                <TabPane label="店铺角色" name="shopRole">
                    <Card class="default"> 
                        <p slot="title" class="shopRoleTitle">
                            店铺角色列表
                        </p>
                        <div class="d-f jc-sb ai-c">
                            <div class="">
                                <Button type="primary" @click="addShopRole">新增</Button>
                                <Button type="primary" @click="delShopRole(shopRoleList)">删除</Button>
                            </div>
                            <div>
                                <Input search enter-button="查询" placeholder="请输入姓名" @on-search="search" />
                            </div>
                        </div>
                        
                        <Table 
                            ref="shopRoleTable"
                            class="mt-20"
                            :columns="shopRoleColumns" 
                            :data="shopRoleData"
                            @on-selection-change="shopSelection"
                            >
                        </Table>
                            <Page
                            ref="shopPersoPage"
                            :total="totalElements"
                            :page-size="size"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            show-sizer
                            :page-size-opts="[5, 10, 20, 30, 40]"
                            show-total transfer show-elevator
                            style="margin-top:30px;text-align:center;"></Page>
                        </Card>
                    </TabPane>
                    <!-- 店铺人员列表 -->
                <TabPane label="店铺人员" name="shopPersonnel">
                    <Card class="default">
                            <p slot="title" class="shopRoleTitle">
                            店铺人员列表
                            </p>
                        <div class="d-f jc-sb ai-c">
                            <div class="">
                                <Button type="primary" @click.stop="addShopPerson">新增</Button>
                                <Button type="primary" @click.stop="delShopRole(peopleBtnList)">删除</Button>
                            </div>
                            <div>
                                <Input search enter-button="查询" placeholder="请输入姓名" @on-search="sea2"/>
                            </div>
                        </div>   
                            <Table 
                            ref="shopManTable"
                            class="mt-20"
                            :columns="shopManColumns" 
                            :data="shopManData"
                            @on-selection-change="shopSelection">
                            </Table>
                            <Page
                                ref="shopPepoleTablePage"
                                :total="totalElements"
                                :page-size="size1"
                                @on-change="changePage"
                                @on-page-size-change="changePageSize"
                                show-sizer
                                :page-size-opts="[5, 10, 20, 30, 40]"
                                show-total transfer show-elevator
                                style="margin-top:30px;text-align:center;"></Page>
                            </Card>
                        </TabPane>
                    </Tabs>
                
       
  <!-- 店铺角色 -->
        <Modal
            v-model="newRoleM"
            :title="newRoleModTitle"
            :mask-closable="false"
            :draggable="true">
            <Form ref="newRoleForm" :model="newRoleFormModel" :rules="newRoleFormRule" :label-width="100">
                <FormItem label="角色名称：" prop="name">
                    <Input v-model="newRoleFormModel.name" placeholder="请输入角色名称" :maxlength="20"></Input>
                </FormItem>
                <FormItem label="描述：" prop="detail">
                    <Input v-model="newRoleFormModel.detail" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入描述信息" :maxlength="100"></Input>
                </FormItem>
                
                <FormItem label="绑定店员：">
                    <!-- <div>
                        <Button v-for="(item, id) in staffList" :key="id" type="text" ghost class="staffBtn">
                            {{item.memberName}}
                            <Icon type="md-close" class="delCurrentIcon" @click.stop="delCurrentItem(id)" />
                        </Button>
                    </div> -->
                    <Select v-model="newRoleFormModel.select"  multiple @on-change="changeStaffList">
                        <Option v-for="(item, id) in staffList" :value="item.id" :label="item.memberName" :key="id">{{ item.memberName }}</Option>
                    </Select>
                </FormItem>
            </Form>
             <div slot="footer" class="ta-r">
                <Button @click.stop="cancelNewRoleMod('newRoleForm')">取消</Button>
                <Button type="primary" :loading="newRoleModLoading" @click.stop="subNewRoleMod('newRoleForm')">确定</Button>
            </div>
        </Modal>
         <!-- 菜单权限显示 -->
        <Modal   :draggable="true" v-model="menuModal">
            <p slot="header">绑定权限</p>
            <div style="margin: 0 auto;width: 50%;">
            <Tree :data="menuList" show-checkbox multiple ref='changeTree1'></Tree>
            </div>
            <div slot="footer" class="ta-r">
                <Button :loading="newRoleModLoading" @click.stop="nullChoose">取消</Button>
                <Button type="primary" :loading="newRoleModLoading" @click.stop="cerChoose">确定</Button>
            </div>
        </Modal>
        
         <!-- 店铺人员 -->
        <Modal   :draggable="true" 
        title="添加店铺人员"
        :mask-closable="false"
        v-model="shopPepole"
        width= "800px">
            <div style="text-align:center">
                <div class="d-f jc-sb ai-c">
                    <Select  v-model="editorModel.select"  multiple @on-change="changeStaffList" style="width:500px;">
                        <Option v-for="(item, id) in staffList" :value="item.id" :label="item.name" :key="id">{{ item.name }}</Option>
                    </Select>
                    <div>
                        <Input search enter-button="查询" placeholder="请输入人员名称" @on-search="searchShopPer" />
                    </div>
                </div>
                <Table
                ref="peopleRef"
                :columns="peopleColumns" 
                :data="peopleData" show-checkbox multiple
                 @on-selection-change="setSelection"
                 class="mt-20 basicModalFix"></Table>
              <Page
                :total="totalElementsPeople"
                :page-size="peopleSize"
                @on-change="changePeoplePage"
                @on-page-size-change="changePeoplePageSize"
                show-sizer
                :page-size-opts="[5, 10, 20, 30, 40]"
                show-total
                style="margin-top:30px;text-align:center;"></Page>
            </div>
             <div slot="footer" class="ta-r">
                <Button @click.stop="cancelNewPeople">取消</Button>
                <Button type="primary" :loading="newRoleModLoading" @click.stop="subNewPeople">确定</Button>
            </div>
        </Modal>
        <!-- 编辑店铺人员 -->
        <Modal :draggable="true" 
            title="编辑店铺人员"
            :mask-closable="false"
            v-model="shopPepole1"
            width= "800px">
                <Form ref="editorForm" :model="editorModel" :label-width="80">
                    <FormItem label="角色名称：" prop="name">
                        <Input v-model="editorModel.name" placeholder="请输入角色名称" :maxlength="20" readonly></Input>
                    </FormItem>
                    <FormItem label="部门" prop="detail">
                        <Input v-model="editorModel.memberDepartmentName" type="textarea" :autosize="{minRows: 2,maxRows: 5}" :maxlength="100" readonly></Input>
                    </FormItem>
                    <FormItem label="绑定角色：">
                    <Select v-model="editorModel.select"  multiple   @on-change="changeStaffList">
                            <Option v-for="(item, id) in staffList" :value="item.id" :label="item.name" :key="id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Form>
                <div slot="footer" class="ta-r">
                    <Button :loading="newRoleModLoading" @click.stop="cancelshopPepole(editorForm)">取消</Button>
                    <Button type="primary" :loading="newRoleModLoading" @click.stop="subNewshopPepole(editorForm)">确定</Button>
                </div>
        </Modal>
    </div>
</template>
<script>
    // import util from '@/libs/util.js';
    // import Cookies from 'js-cookie';
    export default {
        name: 'shopModule',
        props:["shopIds"],
        data () {
            return {
                // 人员总数
                totalElementsPeople: 0,
                // 人员页数大小
                peopleSize: 10,
                // 人员页数
                peoplePage: 0,
                txtVal: '', // 搜索店铺model
                sizeOne: -1,
                totalElementsOne: -1,
                // details: [],
                shopList: [], // 获取商铺
                imgUrl2: '',
                imgId: -1,
                valueHalf: 2,
                totalElements: 0,
                page: 0,
                size: 10,
                size1: 10,
                setUpModLoading: false, // loading动画
                tabName: 'shopRole', // tab名称
                // 店铺人员相关
                shopPepole1: false,
                selectionIds: [],
                peopleBtn: '添加',
                peopleBtnList: [],
                shopPepole: false,
                shopItemId: '',
                selectList: '',
                customerLevelId: [],
                // 外面de一层
                shopManData: [],
                shopManColumns: [
                    {
                        type: 'selection',
                        width: 45,
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: '',
                        minWidth: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: '编辑',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '15px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'ios-create-outline'
                                            },
                                            on: {
                                                click: () => {
                                                    this.createShopPepole(params.row);
                                                }
                                            }

                                        })
                                    ])
                                ]),
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: '删除',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'ios-trash-outline'
                                            },
                                            on: {
                                                click: () => {
                                                    this.deleteShopPepole(params.row.id);
                                                }
                                            }

                                        })
                                    ])
                                ])

                            ]);
                        }

                    },
                    {
                        title: '姓名',
                        key: 'memberName',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '部门',
                        key: 'memberDepartmentName',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '店铺角色',
                        key: '',
                        align: 'center',
                        width: 180,
                        render: (h, params) => {
                            let rolesList = [];
                            let roles = params.row['roles'];
                            if (roles) {
                                // 循环组织职位列表
                                roles.forEach((org) => {
                                    let name = org['name'];
                                    rolesList.push(h('div', name));
                                });
                            }
                            if (rolesList.length > 0) {
                                return h('div', rolesList);
                            } else {
                                return '暂无';
                            }
                        }
                    },
                    {
                        title: '编辑时间',
                        key: 'createTime',
                        width: 150,
                        align: 'center'
                    }
    
                ],
                // 里面de一层
                peopleData: [],
                peopleColumns: [
                    {
                        type: 'selection',
                        width: 80,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        align: 'center',
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', {}, params.row['name']);
                        }
                    },
                    {
                        title: '部门',
                        key: '',
                        align: 'center',
                        render: (h, params) => {
                            let positionStrList = [];
                            let orgList = params.row['organizationNodeList'];
                            if (orgList) {
                            // 循环组织职位列表
                                orgList.forEach((org) => {
                                    let orgName = org['organization'];
                                    positionStrList.push(h('div', orgName));
                                });
                            }
                            if (positionStrList.length > 0) {
                                return h('div', positionStrList);
                            } else {
                                return '暂无';
                            }
                        }
                    }
                    // {
                    //     title: '操作',
                    //     key: 'action',
                    //     align: 'center',
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('Button', {
                    //                 on: {
                    //                     click: () => {
                    //                         this.peopleClick(params.row);
                    //                     }
                    //                 }
                    //             }, this.peopleBtn)]);
                    //     }
                    // }
                ],
                editorForm: {
                    select: []
                },
                editorModel: {},
                // 店铺角色相关
                shopRoleVal: '',
                shopRoleData: [],
                newRoleFormModel: {},
                newRoleModTitle: ' ',
                shopRoleList: [],
                listId: '',
                itemId: '',
                newRoleM: false,
                staffList: [],
                menuList: [],
                // 店铺角色表单验证
                newRoleFormRule: {
                    name: [
                        {required: true, message: '请填写必填项', trigger: 'blur'},
                        {
                            type: 'string',
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
                            message: '资料名称只能输入汉字数字英文',
                            trigger: 'blur'
                        }
                    ],
                    detail: [
                        {
                            type: 'string',
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
                            message: '资料名称只能输入汉字数字英文',
                            trigger: 'blur'
                        }
                    ]

                },

                shopRoleColumns: [
                    {
                        type: 'selection',
                        width: 45,
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        minWidth: 100,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: '编辑',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'
                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'ios-create-outline'
                                            },
                                            on: {
                                                click: () => {
                                                // this.showEditEmployeeWin(params.row.id);
                                                // alert(123);
                                                // this.newRolef = false;
                                                    this.addShopRole(params);
                                                }
                                            }
                                        })
                                    ])
                                ]),
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: '菜单权限',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'md-funnel'
                                            },
                                            on: {
                                                click: () => {
                                                    this.showEditEmployeeWin(params.row);
                                                }
                                            }
                                        })
                                    ])
                                ]),
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: '删除',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'
                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'ios-trash-outline'
                                            },
                                            on: {
                                                click: () => {
                                                // this.showEditEmployeeWin(params.row.id);
                                                    let ids = [params.row.id];
                                                    this.delShopRole(ids);
                                                }
                                            }
                                        })
                                    ])
                                ])
                            ]);
                        }
                    },
                    {
                        title: '店铺角色名称',
                        key: 'name',
                        align: 'center',
                        minWidth: 120
                    }, {
                        title: '描述',
                        key: 'detail',
                        align: 'center',
                        minWidth: 200
                    }, {
                        title: '店铺人员',
                        key: '',
                        minWidth: 200,
                        align: 'center',
                        render: (h, params) => {
                            console.log(params.row, 'memberShopsView');
    
                            let rolesList = [];
                            let roles = params.row['memberShopsView'];
                            console.log(roles, 'rolesrolesrolesroles');
                            if (roles) {
                            // 循环组织职位列表
                                roles.forEach((org) => {
                                    let name = org['memberName'];
                                    rolesList.push(h('div', name));
                                    console.log(name, ' ;ijiji');
                                });
                            }
                            if (rolesList.length > 0) {
                                return h('div', rolesList);
                            } else {
                                return h(
                                    'span',
                                    {
    
                                    },
                                    name || [
                                        h(
                                            'span',
                                            {

                                            },
                                            '暂无，点击'
                                        ),
                                        h(
                                            'span',
                                            {
                                                style: {
                                                    color: '#0099FF'
                                                }
                                            },
                                            '【编辑】'
                                        ),
                                        h(
                                            'span',
                                            {

                                            },
                                            '按钮去绑定'
                                        )
                                    ]
                                );
                            }
                        }
    
                    } ],
                newRoleForm: {
                    name: '',
                    detail: '',
                    select: []
    
                },
                // 是否触发等待动图
                newRoleModLoading: false,
                // 是否打开菜单权限
                menuModal: false,
                menuData: [],
                menuType: '',
                // 修改商城 srart
                createMod: false,
                showSpin: false,
                // 表单
                createForm:{
                    shopLogo: '', // logo
                    url: '', // logo链接
                    shopName: '', // 商城名称
                    shopTitle: '', // 商城标题
                    shopKeyword: '', // 商城关键词
                    customerServiceTel: '', // 客服热线
                    customerServiceEmail: '', // 客服邮箱
                },
                // 表单验证
                createRule:{
                    shopName: [
                        { required: true, message: '请输入商城名称', trigger: 'blur' },
                        {pattern: /^[\u4e00-\u9fa5a-zA-Z\d,\.，。]+$/, message: '只能输入 中文，英文，数字，逗号句号', trigger: 'blur'}
                    ], // 产品名称
                    shopTitle: [
                        {required: true, message: '商城标题', trigger: 'blur' },
                        {pattern: /^[\u4e00-\u9fa5a-zA-Z\d,\.，。]*$/, message: '标题输入仅限中英文及数字', trigger: 'blur'}
                    ], // 商城标题
                    shopKeyword: [
                        {required: true, message: '商城关键词,用空格隔开，如“关键词1” “关键词2”', trigger: 'blur' },
                        {pattern: /^[\u4e00-\u9fa5A-Za-z0-9 \s，。？/ @ # ￥ % …… & - = + （ ） ( ) ^ ！!]*$/, message: '标题输入仅限中英文及数字', trigger: 'blur'}
                    ], // 商城关键词
                    url: [
                        { required: true, message: '请上传商城logo', trigger: 'blur' }
                    ],
                    customerServiceTel: [
                        {required: true, message: '请输入客服热线', trigger: 'blur'},
                        {type: 'string', pattern: /^[0-9 -]+$/, message: '客服热线格式输入有误,座机号请带区号，如027-88888888', trigger: 'blur'}
                    ], // 客服热线
                    customerServiceEmail: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', pattern: /^[0-9A-Za-z][\.-_0-9A-Za-z]*@[0-9A-Za-z]+(?:\.[0-9A-Za-z]+)+$/, message: '请输入正确邮箱格式，xx@xx.xx或xx-xx@xx.xx', trigger: 'blur'}
                    ] // 客服邮箱

                },
                // end
                shopId: ''
            };
        },
        created () {
        },
        mounted () {
            let that = this;
            this.shopId = this.$route.query.id;
            // 店铺列表
            let val = 1;
            // that.pageShopList(val);
            this.findAchievementListByPage()
        },
        methods: {
            // 店铺人员设置选中项
            setSelection (selection) {
                console.log(selection, 9999);
                //     this.selectionIds
                this.selectionIds = selection;
                console.log(this.selectionIds, '店铺人员设置选中项');
            },
            // 设置店铺权限
            changePageOne (val) {
                this.pageShopList(val);
            },
            // 搜索店铺
            pageShopList (val) {
                let _this = this;
                depot.get({
                    url: this.URL.EC_SELLER.GET_ALL_SELLER_SHOP_PAGE,
                    config: {
                        params: {
                            size: 8,
                            page: val - 1,
                            shopName: _this.txtVal
                        }
                    },
                    cb (data) {
                        if (data.code === 999) {
                            _this.$Message.error(data.message);
                        } else {
                            console.log(data.data, '获取商铺id');
                            _this.shopList.splice(0, _this.shopList.length);
                            _this.shopList = data.data;
                        }
                    }
                });
            },
            // authentication () {
            //     this.$router.push({ name: 'BasicInfo'});
            // },
            // 修改店铺信息
            //1.1 打开商铺基本设置弹窗
            writeSetUpMod (item) {
                console.log(item, '修改店铺信息')
                this.createMod = true;
                this.createForm = item;
            },
            // 1.2 上传或删除图片的方法
             // 图片上传
        beforeUploadImg (file) {
            console.log(file, '123')
            this.beforeUpload(file, 'img');
        },
        beforeUpload (file, type) {
            let vue = this;
            if(type === 'img') {
                if (!/image\/\w+/.test(file.type)) {
                    vue.$Message.error('请确保文件为图像类型');
                    return;
                }
            }
            if (file.size > 5242880) {
                vue.$Message.error('文件不能大于5M,请重新上传');
                return false;
            }
            if (file) {
                let reader = new FileReader();
                reader.onloadend = function () {
                    /* this从vue实例变为reader */
                    let submitData = new FormData();
                    submitData.append('file', file);
                    // let vue = this;
                    depot.post({
                        url: vue.URL.DOCUMENT.UPLOAD_DOCUMENT,
                        data: submitData,
                        cb: (data) => {
                            console.log(data.data,111)
                            if (data.code === 0) {
                                vue.$Message.success('图片上传成功');
                                if (type === 'img') {
                                    vue.createForm.url = data.data.accessUrl;
                                    vue.createForm.shopLogo = data.data.id;
                                    console.log(data.data,111)
                                }
                            } else {
                                vue.$Message.error(data.message);
                            }
                        },
                        ce: (error) => {
                        }
                    });
                };
                if (file) {
                    reader.readAsDataURL(file);
                }
            }
        },
        // 删除上传的图片
        handleRemove (file, index) {
            console.log(file.length, 'this.$refs.upload');
            // const fileList = this.$refs.upload.fileList;
            this.createForm.url = "";
             this.createForm.shopLogo = "";
        },
        
        // 取消创建商城
        closeCreate(){
            // this.$refs['createRef'].resetFields();
            this.createMod = false;
            console.log(this.createForm, '取消创建商城')
        },
        // 提交创建商城表单
        submitCreate(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    // console.log(this.createForm, '提交创建 商城表单')
                    
                    this.showSpin = true;
                    // 进入页面查询商铺是否存在
                    this.createForm.isBOSSAdd = false;
                    this.createForm.isDefault = false;
                    this.createForm.shopId = this.createForm.id;
                    depot.post({
                        url: this.URL.EC_SELLER.SHOP_SAVE,
                        data: this.createForm,
                        cb: (data) => {
                            if(data.code === 0) {
                                this.$Message.success('创建商城成功');
                                this.showSpin = false;
                                this.createMod = false;
                                this.$refs['createRef'].resetFields();
                                this.pageShopList();
                            }else{
                                this.$Message.error(data.Message);
                                this.showSpin = false;
                            }
                        },
                        ce: (error) => {
                            this.$Message.error(data.Message);
                        },
                    })
                }
            })
        },
            // 修改店铺信息 end
            // tab切换
            getTabName (val) {
                if (val === 'shopRole') {
                    this.tabName = 'shopRole';
                    this.findAchievementListByPage();
                }
                if (val === 'shopPersonnel') {
                    this.tabName = 'shopPersonnel';
                    // this.findAchievementListByPageSec();
                    // this.sea2();
                    this.findAchievementListByPage2();
                }
            },
            // 翻页
            changePage (val) {
                console.log(this.tabName, 'tabname  ');
                this.page = val - 1;
                console.log(val, 'changePage');
                this.findAchievementListByPage();
                if (this.tabName == 'shopPersonnel') {
                    this.findAchievementListByPage2();
                }
            },
            // 人员列表翻页
            changePeoplePage (val) {
                this.peoplePage = val - 1;
                this.findAchievementListByPage1();
            },
            // 修改页面数据量
            changePageSize (val) {
                this.size = val;
    
                this.findAchievementListByPage();
                if (this.tabName == 'shopPersonnel') {
                    this.findAchievementListByPage2();
                }
            },
            // 修改人员页面数量
            changePeoplePageSize (val) {
                this.peopleSize = val;
                this.findAchievementListByPage1();
            },
            // 搜索店铺角色
            search (val) {
                console.log(val, '店铺角色关键字');
                this.shopRoleVal = val;
                this.sea1();
            },
            // 打开新增编辑角色
            addShopRole (ro) {
                if (ro.row) {
                    console.log(this.newRoleFormModel, 'ppo');
                    this.newRoleModTitle = '编辑角色';
                    this.newRoleFormModel.name = ro.row.name;
                    this.newRoleFormModel.detail = ro.row.detail;
                    this.itemId = ro.row.id;
                    this.newRoleFormModel.select = [];
                    ro.row.memberShopsView.forEach(role => {
                        this.newRoleFormModel.select.push(role.id);
                    });
                    // console.log(this.staffList);
                    // this.itemId = ro.row.id;
                } else {
                    this.newRoleModTitle = '新增角色';
                    this.newRoleFormModel.name = '';
                    this.newRoleFormModel.detail = '';
                    this.newRoleFormModel.select = [];
                    this.itemId = '';
                }
                depot.get({
                    url: this.URL.EC_SELLER.FIND_SHOP_MEMBER_LIST_BY_SHOPID + '?shopId=' + this.shopId,
                    cb: (data) => {
                        if (data.code === 0) {
                            console.log(data.data, 'p0p');
                            this.staffList = data.data;
                        }
                    }
                });
                this.newRoleM = true;
            },
            // 店铺角色选中项
            shopSelection (section) {
                let sectionDataArr = [];
                console.log(this.tabName);
                if (this.tabName == 'shopRole') {
                    this.shopRoleList.splice(0, this.shopRoleList.length);
                    if (section && section.length > 0) {
                        section.forEach((sectionData) => {
                            sectionDataArr.push(sectionData.id);
                        });
                    }
                    this.shopRoleList = Array.from(new Set(sectionDataArr));
                    console.log(this.shopRoleList, 'shopRoleList');
                } else if (this.tabName == 'shopPersonnel') {
                    this.peopleBtnList.splice(0, this.shopRoleList.length);
                    if (section && section.length > 0) {
                        section.forEach((sectionData) => {
                            sectionDataArr.push(sectionData.id);
                        });
                    }
                    this.peopleBtnList = Array.from(new Set(sectionDataArr));
                    console.log(this.shopRoleList, 'shopRoleList');
                    console.log(this.peopleBtnList, 'peopleBtnList');
                } else {
                    console.log(section);
                }
            },
            // 店铺角色绑定人员删除
            delCurrentItem () {},
            // 店铺角色菜单权限
            showEditEmployeeWin (role) {
                console.log(role, 'rolerole');
                if (!role) {
                    this.$Message.error('获取角色信息失败');
                    return;
                }
                // 如果不存在则去获取全部菜单
                this.itemId = role.id;
                this.menuList = role.resourceList;
                this.getAllMenu();
                this.menuModal = true;
            },
            // 获取全部菜单
            getAllMenu () {
                depot.get({
                    url: this.URL.EC_SELLER.FIND_ALL_MENUS,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.mergeTreeData(data.data);
                            this.menuList = data.data;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.$Message.error(data.message);
                    }
                });
            },
            mergeTreeData (menuList) {
                if (menuList && menuList.length > 0) {
                    menuList.forEach((menu) => {
                        if (menu) {
                            menu.title = menu.name;
                            if (menu.remark) {
                                menu.title = menu.title + '(' + menu.remark + ')';
                            }
                            menu.expand = false;
                            try {
                                this.menuList.forEach((resource) => {
                                    // 不回显父级·只做子集的回显
                                    if (!menu.children || menu.children.length == 0) {
                                        if (menu.id == resource.id) {
                                            menu.checked = true;
                                            throw new Error('跳出循环');
                                        }
                                    }
                                });
                            } catch (e) {
                                menu.expand = true;
                            }
                            this.mergeTreeData(menu.children);
                        }
                    });
                }
            },
            // 店铺角色菜单权限选择确定删除
            cerChoose () {
                var checkedNodes = this.$refs['changeTree1'].getCheckedNodes();
                console.log(checkedNodes, 'checkedNodes');
                var vue = this;
                if (!checkedNodes || checkedNodes.length == 0) {
                    this.$Message.error('请勾选菜单');
                    vue.newRoleModLoading = false;
                    this.$nextTick(() => {
                        vue.newRoleModLoading = true;
                    });
                    return;
                }
                let roleIds = [];
                checkedNodes.forEach((node) => {
                    if (node) {
                        roleIds.push(node.id);
                    }
                });
                console.log(roleIds, '菜单权限');
                this.menuData.checked = false;
                depot.post({
                    url: vue.URL.EC_SELLER.BIND_ROLE_AND_RESOURCE + '?id=' +
                    this.itemId + '&type=MENU',
                    data: roleIds,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.$Message.success('提交成功');
                            this.findAchievementListByPage();
                            this.menuModal = false;
                            this.menuList = [];
                        }
                    }

                });
            },
            nullChoose () {
                this.menuModal = false;
                this.itemId = null;
                this.menuList = [];
            },
            // 店铺角色页面数量切换
            findAchievementListByPage () {
                let queryParams = {};
                queryParams.page = this.page;
                queryParams.size = this.size;
                depot.get({
                    url: this.URL.EC_SELLER.FIND_ROLE_PAGE + '?shopId=' + this.shopId,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        if (data.code === 0) {
                            this.shopRoleData = data.data.content;
                            this.size = data.data.size;
                            this.totalElements = data.data.totalElements;
                        }
                    }
                });
            },
            // 店铺角色取消
            cancelNewRoleMod (name) {
                // console.log(val, 'val');
                this.newRoleM = false;
                this.$refs[name].resetFields();
            },
            // 店铺角色新增确定
            subNewRoleMod (name) {
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.newRoleModLoading = true;
                        // let roleReq = this.newRoleFormModel;
                        // roleReq.push(shopId);
                        let roleReq = {};
                        roleReq.name = this.newRoleFormModel.name;
                        roleReq.detail = this.newRoleFormModel.detail;
                        roleReq.memberShopIds = this.customerLevelId;
                        roleReq.shopId = this.shopId;

                        console.log(roleReq, 'val roleReq');
                        // memberShopIds
                        if (this.newRoleModTitle == '新增角色') {
                            roleReq.memberShopIds = this.newRoleFormModel.select;
                        } else if (this.newRoleModTitle == '编辑角色') {
                            // roleReq.memberShopIds = this.editorModel.select;
                            roleReq.id = this.itemId;
                        }
                        console.log(this.newRoleFormModel.select, '删除');
                        depot.post({
                            url: this.URL.EC_SELLER.SAVE_ROLE + '?ShopId=' + this.shopId,
                            data: roleReq,
                            cb: (data) => {
                                if (data.code === 0) {
                                    this.$Message.success('添加成功');
                                    this.newRoleModLoading = false;
                                    this.newRoleM = false;
                                    this.$refs[name].resetFields();
                                    this.newRoleFormModel = {};
                                    this.res();
                                } else {
                                    this.$Message.error(data.message);
                                    this.newRoleModLoading = false;
                                }
                            },
                            ce (error) {
                                this.$Message.error(data.message);
                                this.newRoleModLoading = false;
                            }
                        });
                    }
                });
            },
            // 删除全部  角色
            delShopRole (arr) {
                console.log(arr, '删除');
                let ids = arr;
                if (arr.toString() == '' || arr.length < 1) {
                    this.$Message.error('请先选择要删除的角色');
                    return;
                }
                // 设置 删除时候的提示语
                let deletemMsg = '是否删除' + arr.length + '项';
                // 删除全部staffList
                console.log(arr, '打印全部角色');
                if (this.tabName == 'shopRole') {
                    this.$Modal.confirm({
                        content: deletemMsg,
                        // loading: true,
                        onOk: () => {
                        // alert('删除成功');
                            depot.post({
                                url: this.URL.EC_SELLER.UPDATE_ROLE_IS_DEL,
                                data: ids,
                                cb: (data) => {
                                // console.log(data, '删除');
                                    this.$Message.success('删除成功');
                                    this.res();
                                    arr = [];
                                }
                            });
                        }
                    });
                } else if (this.tabName == 'shopPersonnel') {
                    this.$Modal.confirm({
                        content: deletemMsg,
                        // loading: true,
                        onOk: () => {
                        // alert('删除成功');
                            depot.post({
                                url: this.URL.EC_SELLER.DELETE_BY_IDS,
                                data: ids,
                                cb: (data) => {
                                // console.log(data, '删除');
                                    this.$Message.success('删除成功');
                                    this.sea2();
                                }
                            });
                        }
                    });
                }
            },
            // 店铺角色刷新
            res () {
                this.sea1(this.listId);
            },
            // 查询
            // 店铺角色
            sea1 (params) {
                depot.get({
                    url: this.URL.EC_SELLER.FIND_ROLE_PAGE + '?shopId=' + this.shopId + '&name=' + this.shopRoleVal,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.shopRoleData = data.data.content;
                            this.staffList = data.data.content.roles;
                        }
                    }
                });
            },
            // 打开新增人员
            addShopPerson () {
                this.shopPepole = true;
                this.selectionIds = [];
                depot.get({
                    url: this.URL.EC_SELLER.FIND_ROLE_PAGE + '?shopId=' + this.shopId,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.staffList = data.data.content;
                            this.editorModel.select = [];
                            this.$forceUpdate();
                            depot.get({
                                url: this.URL.USER.FIND_EMPLOYEE_LIST + '?page=' + this.peoplePage + '&size=' + this.peopleSize,
                                cb: (data) => {
                                    if (data.code === 0) {
                                        // 弹框内的列表
                                        console.log(data.data.content, ' data.data.content data.data.content');
                                        this.peopleData = data.data.content;
                                        this.totalElementsPeople = data.data.totalElements;
                                    }
                                }
                            });
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.$Message.error(data.message);
                    }
                });
            },
            // 店铺人员获取
            sea2 (params) {
                let queryParams = {};
                queryParams.page = this.page;
                queryParams.size = this.size;
                depot.get({
                    url: this.URL.EC_SELLER.FIND_SHOP_MEMBER_LIST_BY_SHOPID + '?shopId=' + this.shopId,
                    cb: (data) => {
                        if (data.code === 0) {
                            console.log(data.data, 'p0p');
                            this.shopManData = data.data;

                        }
                    }
                });
            },
    
            // 人员内部弹窗分页
            findAchievementListByPage1 () {
                // let queryParams = {};
                // queryParams.page = this.page;
                // queryParams.size = this.size;
                depot.get({
                    url: this.URL.USER.FIND_EMPLOYEE_LIST + '?page=' + this.peoplePage + '&size=' + this.peopleSize,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.peopleData = data.data.content;
                            // this.size = data.data.size;
                            this.totalElementsPeople = data.data.totalElements;
                        }
                    }
                });
            },
            // 人员外部分页
            findAchievementListByPage2 () {
                let queryParams = {};
                queryParams.page = this.page;
                queryParams.size = this.size;
                depot.get({
                    url: this.URL.EC_SELLER.FIND_SHOP_MEMBERLIST_BY_SHOP_ID_PAGE + '?shopId=' + this.shopId,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        if (data.code === 0) {
                            this.shopManData = data.data.content;
                            this.staffList = data.data.content;
                            this.size = data.data.size;
                            this.totalElements = data.data.totalElements;
                            // console.log(this.shopManData, ' this.shopRoleData');
                            console.log(data.data, 'ss');
                        }
                    }
                });
            },
            // 人员选择确定，取消
            subNewPeople () {
                this.peopleBtnList = [];
                this.selectionIds.forEach((item) => {
                    let peopleItem = {};
                    peopleItem.memberId = item.id;
                    peopleItem.memberName = item.name;
                    item.organizationList.forEach((item1) => {
                        peopleItem.memberDepartmentName = item1.organizationName;
                    });
                    peopleItem.roleIds = this.editorModel.select;
                    this.peopleBtnList.push(peopleItem);
                });
                console.log(this.peopleBtnList, '人员选择确定peopleItem');
                this.newRoleModLoading = true;
                if (this.peopleBtnList.length > 0) {
                      depot.post({
                    url: this.URL.EC_SELLER.SAVE_MEMBER_SHOPS + '?shopId=' + this.shopId,
                        data: this.peopleBtnList,
                        cb: (data) => {
                            if (data.code === 0) {
                                this.$Message.success('提交成功');
                                this.peopleBtnList = [];
                                this.sea2();
                                this.shopPepole = false;
                                this.newRoleModLoading = false;
                            } else {
                                this.$Message.error(data.message);
                                this.newRoleModLoading = false;
                            }
                        },
                        ce: (error) => {
                            this.newRoleModLoading = false;
                            this.$Message.error(data.message);
                        }
                    });
                }else{
                    this.$Message.error('请选择人员');
                    this.newRoleModLoading = false;
                }
            },
            cancelNewPeople () {
                this.shopPepole = false;
                this.newRoleModLoading = false;
            },
            // 人员搜索
            searchShopPer (val) {
                var passReg = /^[a-zA-Z0-9\u4e00-\u9fa5_]*$/;
                if (passReg.test(val)) {
                    depot.get({
                        url: this.URL.USER.FIND_EMPLOYEE_LIST + '?name=' + val,
                        cb: (data) => {
                            if (data.code === 0) {
                                console.log(data.data.content);
                                if (data.data.content !== '') {
                                    this.peopleData = data.data.content;
                                } else {
                                    this.$Message.error(data.message);
                                }
                            }
                        },
                        ce: (error) => {
                            this.$Message.error(data.message);
                        }
                    });
                }
            },
            changeStaffList (val) {
                this.customerLevelId = '';
                console.log(val, '122');
                if (val === 'all') {
                    this.customerLevelId = '';
                } else {
                    this.customerLevelId = val;
                }
            },
            // 人员列表单项编辑,删除,
            createShopPepole (val) {
                this.shopItemId = val.id;
                this.editorModel.name = val.memberName;
                this.editorModel.memberDepartmentName = val.memberDepartmentName;
                depot.get({
                    url: this.URL.EC_SELLER.FIND_ROLE_PAGE + '?shopId=' + this.shopId,
                    cb: (data) => {
                        if (data.code === 0) {
                            console.log(data.data, 'pp');
                            // this.editorModel.select = data.data.content;
                            console.log(this.editorModel.select, 111);
                            this.staffList = data.data.content;
                            this.editorModel.select = [];
                            val.roles.forEach(role => {
                                this.editorModel.select.push(role.id);
                            });
                            this.shopPepole1 = true;
                            this.$forceUpdate();
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.$Message.error(data.message);
                    }
                });
            },
            deleteShopPepole (val) {
                console.log(val);
                let ids = [];
                ids.push(val);
                this.$Modal.confirm({
                    content: '是否删除' + ids.length + '项',
                    // loading: true,
                    onOk: () => {
                        // alert('删除成功');
                        depot.post({
                            url: this.URL.EC_SELLER.DELETE_BY_IDS,
                            data: ids,
                            cb: (data) => {
                                if (data.code === 0) {
                                    this.$Message.success('删除成功');
                                    this.sea2();
                                } else {
                                    this.$Message.error(data.message);
                                }
                                // console.log(data, '删除');
                            },
                            ce: (error) => {
                                this.$Message.error(data.message);
                            }
                        });
                    }
                });
            },
            cancelshopPepole (name) {
                this.shopPepole1 = false;
                name = [];
                console.log(name, 'namename');
            },
            subNewshopPepole (name) {
                //   BIND_USER_AND_ROLE
                console.log(this.shopItemId);
                let roleIds = [];
                roleIds = this.customerLevelId;
                console.log(roleIds, '编辑将提交的数组');
                depot.post({
                    url: this.URL.EC_SELLER.BIND_USER_AND_ROLE + '?id=' + this.shopItemId,
                    data: roleIds,
                    cb: (data) => {
                        if (data.code === 0) {
                            this.$Message.success('提交成功');
                            this.sea2();
                            this.shopPepole1 = false;
                        } else {
                            this.$Message.error(data.message);
                        }
                    }
    
                });
            },
            watch: {
                shopIds (newVal, oldVal) {
                    if(newVal) {
                        this.shopId = newVal;
                        this.findShop()
                    }
                    console.log(this.shopId, 'ppp')
                }
            },
        }
    
    };
</script>

<style lang="less">
    .shopIofoMain{
        .shop-con{
            .shop_con_tit{
                margin-bottom: 20px;
                .btn-shop{
                    width: 150px;
                    height:34px;
                    line-height:34px;
                    border-radius:17px;
                    background: #ffae00;
                    font-size:14px;
                    color:#ffffff;
                    text-align:center;
                    border:none;
                }
                .shop-tit-r{
                    float: right;
                    width: 280px;
                    height: 34px;
                    position: relative;
                    .searchVal{
                        width: 246px;
                        height: 34px;
                        border-radius:17px;
                        text-indent:1em;
                        border:1px solid #cccccc;
                    }
                    .ivu-btn{
                        position: absolute;
                        right: 34px;
                    }
                }
            }
            .card{
                background-color: rgba(0, 0, 0, .3);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
                margin-bottom: 10px;
                position: relative;
                display: flex;
                align-items: center;
                height: 160px;
                .cardL{
                    height: 100%;
                    min-width: 110px;
                    background-color: rgba(0, 0, 0, .5);
                    display: flex;
                    align-items: center;
                    img{
                        width: 110px;
                        height: 110px;
                    }
                }
                .cardR{
                    flex: 1;
                    padding: 20px;
                    .title{
                        color:#fff;
                        font-size: 18px;
                        margin-bottom: 10px;
                    }
                    .theMain{
                        margin-top: 5px;
                        font-size: 14px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        .theMainL{
                        }
                        .theMainR{
                            flex: 1;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            max-width: 220px;
                        }
                        .theMain-btn{
                            background-color: rgba(255, 255, 255, 0.2);
                            border-radius: 15px;
                            border: none;
                            color: #fff;
                            width: 100px;
                            height: 30px;
                            padding: 0;
                            text-align: center;
                            line-height: 30px;
                        }
                    }
                    .lv{
                        // width: 100%;
                        flex: 1;
                        // clear: both;
                        a{

                            font-size:12px;
                            color:#308e29;
                        }
                        a:link {color:#308e29;}

                        a:visited {color:#308e29;}

                        a:hover {color:#308e29;}

                        a:active {color:#308e29;}
                    }
                }
                .setUp{
                    position: absolute;
                    right:20px;
                    top:20px;
                    text-align: right;
                    cursor: pointer;
                    span{
                        display: none;
                        color:#fff;
                    }
                    &:hover span{
                        display: block;
                    }
                }
            }
            .ivu-page{
                text-align: center;
                margin-top: 20px;
                .ivu-page-prev,.ivu-page-next{
                    width: 60px;
                }
                .ivu-icon-ios-arrow-left:before {
                    content: "上一页";
                }
                .ivu-icon-ios-arrow-right:before {
                    content: "下一页";
                }
            }
            .hasNone{
                font-size: 14px;
                color:#fff;
                text-align: center;
            }
        }
      
    }
    // .spread-btn{
    //     margin-top: 100px;
    //     margin-left: 20%
    // }
    .shopRoleTitle{
        position: relative;
        padding-left: 10px;
        &:before{
            position: absolute;
            content: "";
            left:0;
            top:0;
            width: 3px;
            height:100%;
            background-color: rgba(0, 153, 255, 1);
        }
    }
    .basicModalFix{
        height: 330px;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: scroll;
    }
      .demo-upload-list{
        display: inline-block;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff; 
        font-size: 95px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>